<template>
  <div class="regest_container">
    <div class="bg"></div>
    <div class="header">
      <!-- 可以放个校徽 -->
      <img src="#" alt="" />
      <h3 class="title">北航二手货交易平台注册页面</h3>
    </div>
    <div class="regest_box">
      <div class="regest_top">会员注册</div>
      <el-form
        class="regest_form"
        :model="regestForm"
        :rules="regestRules"
        ref="regestForm"
      >
        <el-form-item label="注册用户名" prop="username">
          <el-input
            v-model="regestForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入一个用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="regestForm.email"
            prefix-icon="el-icon-message"
            placeholder="请输入一个有效邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="regestForm.password"
            prefix-icon="el-icon-lock"
            show-password
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input
            v-model="regestForm.password2"
            prefix-icon="el-icon-lock"
            show-password
            placeholder="请再次确认密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">返回登录页</el-button>
          <el-button type="primary" @click="regest">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (this.regestForm.password2 !== this.regestForm.password)
        callback("两次密码不一致");
      else callback();
    };
    return {
      //表单绑定对象
      regestForm: {
        username: "",
        password: "",
        email: "",
        password2: "",
      },
      //表单规则验证
      regestRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { max: 8, min: 8, message: "请输入8位用户名", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    regest() {
      this.$refs.regestForm.validate(async (valid) => {
        if (!valid) return;
        const { data: result } = await this.$http.post(
          "/register",
          this.regestForm
        );
        if (result.success !== true)
          return this.$message.error("用户名重复,注册失败!");
        this.$message.success("用户注册成功!");
        this.$router.push("login");
      });
    },
  },
};
</script>


<style lang="less" scoped>
.bg {
  background-image: url(https://th.bing.com/th/id/Rd6b536429ab44afea81917a8b972f985?rik=o7vAgRE0JiouTw&riu=http%3a%2f%2fwww.tianlaiedu.com%2fUpFile%2fimage%2f20180117%2f20180117151032_8959.jpg&ehk=wOF%2b7u%2bACDKInZslJo4ciopiJ%2b6e8j7Wzq%2fNbvTLxuM%3d&risl=&pid=ImgRaw);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
.regest_container {
  height: 100%;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.header h3 {
  display: inline-block;
  margin: 40px 40px;
  height: 60px;
  font-weight: 400;
  font-size: 50px;
  color: #fff;
  font-family: "SimSun";
}
.regest_box {
  width: 500px;
  height: 650px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.regest_box .regest_top {
  display: inline-block;
  width: 100%;
  height: 80px;
  background-color: #f0f0f0;
  font-size: 38px;
  text-align: center;
  line-height: 80px;
  border-radius: 5px 5px 0 0;
}
.regest_form {
  box-sizing: border-box;
  padding: 30px 40px;
}
/deep/ .el-button {
  font-size: 17px;
  width: 204px;
}
/deep/.el-input__inner {
  font-size: 19px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
</style>